import React from "react";
import {inject, observer} from "mobx-react";
import {Route, withRouter} from "react-router-dom";
import {TabBar,Tools} from "weaver-mobile";
import {getRouteParams} from "../../util";
import Home from "../home";
import Projects from "../projects";
import Task from "../task";
import Statistics from "../statistics";

const getLabel = Tools.getLabel

@withRouter
@inject("indexStore")
@observer
class Enter extends React.Component {

    componentDidMount() {
        this.Init(this.props)
    }

    componentWillReceiveProps(nextProps, nextContext) {
        if (nextProps.match.params.tab !== this.props.match.params.tab) {
            this.Init(nextProps)
        }
    }

    Init = (props) => {
        const {history, indexStore: {changeSelectTab}} = props;
        if (!history.location.pathname) {
            changeSelectTab("home", history)
        } else {
            const {tab} = getRouteParams(props);
            changeSelectTab(tab, history)
        }
    };

    render() {
        const {history, indexStore} = this.props;
        const {selectedTab, changeSelectTab} = indexStore;
        return (
            <div className="main-enter-container">
                <TabBar
                    unselectedTintColor="#949494"
                    barTintColor="white"
                    tabBarPosition="bottom"
                >
                    <TabBar.Item

                        title={<span className={selectedTab === "home"?"tab-tint-color":""}>{getLabel("18363","首页")}</span>}
                        key="Home"
                        className={"tab-color"}
                        icon={<i
                            className="proj-nav-bar-icon icon-proj icon-home1"
                        />}
                        selectedIcon={<i
                            className="tab-tint-color proj-nav-bar-icon icon-proj icon-home1"
                        />}
                        selected={selectedTab === "home"}
                        onPress={() => {
                            changeSelectTab("home", history)
                        }}
                    >
                        <Route path="/index/home" component={Home}/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<i
                            className="proj-nav-bar-icon icon-proj icon-wenjianjia"
                        />}
                        selectedIcon={<i
                            className="tab-tint-color proj-nav-bar-icon icon-proj icon-wenjianjia"
                        />}
                        title={<span className={selectedTab === "projects"?"tab-tint-color":""}>{getLabel("101","项目")}</span>}
                        key="Projects"
                        selected={selectedTab === "projects"}
                        onPress={() => {
                            changeSelectTab("projects", history)
                        }}
                    >
                        <Route path="/index/projects" component={Projects}/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<i
                            className="proj-nav-bar-icon icon-proj icon-task_fill"
                        />}
                        selectedIcon={<i
                            className="tab-tint-color proj-nav-bar-icon icon-proj icon-task_fill"
                        />}
                        title={<span className={selectedTab === "task"?"tab-tint-color":""}>{getLabel("1332","任务")}</span>}
                        key="Task"
                        selected={selectedTab === "task"}
                        onPress={() => {
                            changeSelectTab("task", history)
                        }}
                    >
                        <Route path="/index/task" component={Task}/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<i
                            className="proj-nav-bar-icon icon-proj icon-pingtaitongji"
                        />}
                        selectedIcon={<i
                            className="tab-tint-color proj-nav-bar-icon icon-proj icon-pingtaitongji"
                        />}
                        title={<span className={selectedTab === "statistics"?"tab-tint-color":""}>{getLabel("352","统计")}</span>}
                        key="Statistics"
                        selected={selectedTab === "statistics"}
                        onPress={() => {
                            changeSelectTab("statistics", history)
                        }}
                    >
                        <Route path="/index/statistics" component={Statistics}/>
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

export default Enter;
